<template>
  <div>
    <div>
      <!-- 页头 -->
      <div class="back">
        <i class="el-icon-back" @click="$router.go(-1)"></i>
        <span style="padding: 10px; color: rgba(0, 0, 0, 0.15)">|</span>
        <span style="font-size: 20px; font-weight: 500; color: #2f343e"
          >核查取证详情</span
        >
      </div>
      <!-- 主题 -->
      <div class="content-box1">
        <!-- 事件基本想信息 -->
        <div class="box-top">
          <div class="box-top-title">事件基本信息</div>
          <!-- 事件信息内容 -->
          <div class="box-top-content">
            <!-- 第一行 -->
            <div style="display: flex">
              <div style="width: 25%; display: flex">
                <div style="font-size: 14px; color: #606266; width: 100px">
                  事件名称：
                </div>
                <div style="font-size: 14px; color: #333435; width: 250px">
                  防火墙策略变化事件
                </div>
              </div>
              <div style="width: 25%; display: flex">
                <div
                  style="
                    font-size: 14px;
                    color: #606266;
                    width: 100px;
                    margin-left: 60px;
                    flex-shrink: 0;
                  "
                >
                  级别：
                </div>
                <div style="font-size: 14px; color: #4b6eef; width: 250px">
                  一般
                </div>
              </div>
              <div style="width: 25%; display: flex">
                <div
                  style="
                    font-size: 14px;
                    color: #606266;
                    width: 100px;
                    margin-left: 60px;
                    flex-shrink: 0;
                  "
                >
                  类别：
                </div>
                <div style="font-size: 14px; color: #333435; width: 250px">
                  用户行为异常
                </div>
              </div>
              <div style="width: 25%; display: flex">
                <div
                  style="
                    font-size: 14px;
                    color: #606266;
                    width: 100px;
                    margin-left: 60px;
                    flex-shrink: 0;
                  "
                >
                  处置信息：
                </div>
                <div style="font-size: 14px; color: #8c8c8c; width: 250px">
                  —
                </div>
              </div>
            </div>
            <!-- 第二行 -->
            <div style="display: flex; margin-top: 20px; margin-bottom: 20px">
              <div style="width: 25%; display: flex">
                <div style="font-size: 14px; color: #606266; width: 100px">
                  发生时间：
                </div>
                <div style="font-size: 14px; color: #333435; width: 250px">
                  2022.03.20 12:08:23
                </div>
              </div>
              <div style="width: 25%; display: flex">
                <div
                  style="
                    font-size: 14px;
                    color: #606266;
                    width: 100px;
                    margin-left: 60px;
                    word-break: break-all;
                    flex-shrink: 0;
                  "
                >
                  处置状态：
                </div>
                <div class="box-img">
                  <img
                    src="@/assets/images/state-fail@2x.png"
                    alt="example"
                    style="width: 14px; height: 14px; margin-right: 5px"
                  />
                  <span style="font-size: 14px; color: #333435; width: 250px"
                    >未处置</span
                  >
                </div>
              </div>
              <div style="width: 25%; display: flex">
                <div
                  style="
                    font-size: 14px;
                    color: #606266;
                    width: 100px;
                    margin-left: 60px;
                    flex-shrink: 0;
                  "
                >
                  处置时间：
                </div>
                <div style="font-size: 14px; color: #8c8c8c; width: 250px">
                  —
                </div>
              </div>
            </div>
            <!-- 第三行 -->
            <div style="display: flex">
              <div style="display: flex">
                <div style="font-size: 14px; color: #606266; width: 100px">
                  事件详情：
                </div>
                <div style="font-size: 14px; color: #333435; width: 785px">
                  发现终端76.14.91.98,对“防火墙策略”进行了修改
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 核查取证详情 -->
        <div class="box-top">
          <div class="box-top-title">核查取证详情</div>
          <!-- 事件信息内容 -->
          <div class="box-top-content">
            <!-- 第一行 -->
            <div style="display: flex">
              <div style="display: flex">
                <div style="font-size: 14px; color: #606266; width: 100px">
                  标题：
                </div>
                <div style="font-size: 14px; color: #333435; width: 785px">
                  针对“防火墙策略变化事件”的协查申请
                </div>
              </div>
            </div>
            <!-- 第二行 -->
            <div style="display: flex">
              <!-- 左 -->
              <div style="display: flex; margin-top: 20px">
                <div
                  style="
                    font-size: 14px;
                    color: #606266;
                    width: 100px;
                    flex-shrink: 0;
                  "
                >
                  单位名称：
                </div>
                <div style="font-size: 14px; color: #333435; width: 532px">
                  新疆维吾尔自治区检察院自监管平台
                </div>
              </div>
              <!-- 右 -->
              <div style="display: flex; margin-top: 20px; margin-bottom: 20px">
                <div
                  style="
                    font-size: 14px;
                    color: #606266;
                    width: 100px;
                    flex-shrink: 0;
                    margin-left: 42px;
                  "
                >
                  协办单位名称：
                </div>
                <div style="font-size: 14px; color: #333435; width: 532px">
                  新疆维吾尔自治区检察院自监管平台
                </div>
              </div>
            </div>
            <!-- 第三行 -->
            <div style="display: flex">
              <!-- 左 -->
              <div style="display: flex">
                <div
                  style="
                    font-size: 14px;
                    color: #606266;
                    width: 100px;
                    flex-shrink: 0;
                  "
                >
                  下发时间：
                </div>
                <div style="font-size: 14px; color: #333435; width: 532px">
                  2023-02-24 09:19:00
                </div>
              </div>
              <!-- 右 -->
              <div style="display: flex; margin-bottom: 20px">
                <div
                  style="
                    font-size: 14px;
                    color: #606266;
                    width: 100px;
                    flex-shrink: 0;
                    margin-left: 42px;
                  "
                >
                  期望完成时间：
                </div>
                <div style="font-size: 14px; color: #333435; width: 532px">
                  2023-03-10 09:19:00
                </div>
              </div>
            </div>
            <!-- 第五行 -->
            <div style="display: flex">
              <div style="display: flex">
                <div style="font-size: 14px; color: #606266; width: 100px">
                  核查取证说明：
                </div>
                <div style="font-size: 14px; color: #333435; width: 785px">
                  针对“防火墙策略变化事件”需要贵单位（新疆维吾尔自治区检察院自检管平台）进行核查取证，并且上报相关取证信息。
                </div>
              </div>
            </div>
            <!-- 第六行 -->
            <div style="display: flex; margin-top: 20px">
              <!-- 左 -->
              <div style="display: flex">
                <div
                  style="
                    font-size: 14px;
                    color: #606266;
                    width: 100px;
                    flex-shrink: 0;
                  "
                >
                  取证状态：
                </div>
                <div style="font-size: 14px; color: #333435; width: 532px">
                  <img
                    src="@/assets/images/zhuangtai2.png"
                    alt="example"
                    style="width: 14px; height: 14px; margin-right: 5px"
                  />
                  已取证
                </div>
              </div>
              <!-- 右 -->
              <div style="display: flex; margin-bottom: 20px">
                <div
                  style="
                    font-size: 14px;
                    color: #606266;
                    width: 100px;
                    flex-shrink: 0;
                    margin-left: 42px;
                  "
                >
                  核查取证时间：
                </div>
                <div style="font-size: 14px; color: #333435; width: 532px">
                  2023-03-08 09:12:39
                </div>
              </div>
            </div>
            <!-- 第七行 -->
            <div style="display: flex">
              <div style="display: flex">
                <div style="font-size: 14px; color: #606266; width: 100px">
                  核查取证过程：
                </div>
                <div style="font-size: 14px; color: #333435; width: 785px">
                  通过运维人员查询相关日志,并对相关日志进行刻盘保存。
                </div>
              </div>
            </div>
            <!-- 第八行 -->
            <div style="display: flex; margin-top: 20px">
              <div style="display: flex">
                <div style="font-size: 14px; color: #606266; width: 100px">
                  核查取证结论：
                </div>
                <div style="font-size: 14px; color: #333435; width: 785px">
                  通过对日志进行分析,确定终端76.14.91.98,对“防火墙策略”进行了修改,但是策略变化是根据相关规定和运维需求进行的修改。
                </div>
              </div>
            </div>
            <!-- 第九行 -->
            <div style="display: flex; margin-top: 20px">
              <div style="display: flex">
                <div style="font-size: 14px; color: #606266; width: 100px">
                  事件定性：
                </div>
                <div style="font-size: 14px; color: #8c8c8c; width: 785px">
                  —
                </div>
              </div>
            </div>
            <!-- 第十行 -->
            <div style="display: flex; margin-top: 20px">
              <div style="display: flex">
                <div style="font-size: 14px; color: #606266; width: 100px">
                  附件：
                </div>
                <div style="font-size: 14px; color: #4b6eef; width: 785px">
                  调查日志汇总.zip
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 进度 -->
        <div class="box-top">
          <div class="box-top-title">进度</div>
          <!-- 事件信息内容 -->
          <!-- 标题 -->
          <div style="display: flex; margin-bottom: 20px">
            <div
              style="
                width: 4px;
                height: 4px;
                background: #4b6eef;
                margin: 5px 8px;
                margin-top: 8px;
                margin-left: 5px;
              "
            />
            <div style="width: 42px; font-size: 14px">状态：</div>
            <img
              src="@/assets/images/zhuangtai2.png"
              style="margin-top: 2px; width: 16px; height: 16px"
              alt=""
            />
            <div style="margin-left: 6px; font-size: 14px">已结束</div>
          </div>
          <!-- 上一部分 -->
          <div style="display: flex">
            <img src="@/assets/images/001@2x.png" class="time-img" alt="" />
            <span style="font-size: 14px; color: rgba(0, 0, 0, 0.65)"
              >2023-03-10 11:00:09</span
            >
            <div
              style="
                width: 5px;
                height: 5px;
                background: #d8d8d8;
                margin: 6px 10px 5px 20px;
                border-radius: 50%;
              "
            />
            <span style="color: #4b6eef; font-size: 14px; margin-top: -2px"
              >审计员</span
            >
          </div>
          <div class="time-box">
            <div>填写了表单：协查表单</div>
            <div>自动分配节点（运维主管）处理人：张波</div>
            <div></div>
          </div>
          <!-- 下一部分 -->
          <div style="display: flex; margin-top: 10px">
            <img src="@/assets/images/001@2x.png" class="time-img" alt="" />
            <span style="font-size: 14px; color: rgba(0, 0, 0, 0.65)"
              >2023-03-09 15:00:09</span
            >
            <div
              style="
                width: 5px;
                height: 5px;
                background: #d8d8d8;
                margin: 6px 10px 5px 20px;
                border-radius: 50%;
              "
            />
            <span style="color: #4b6eef; font-size: 14px; margin-top: -2px"
              >运维主管张波</span
            >
          </div>
          <div class="time-box">
            <div>填写了表单：核查取证报告</div>
            <div></div>
          </div>
          <!-- 上一部分 -->
          <div style="display: flex; margin-top: 13px">
            <img src="@/assets/images/001@2x.png" class="time-img" alt="" />
            <span style="font-size: 14px; color: rgba(0, 0, 0, 0.65)"
              >2023-03-09 15:00:09</span
            >
            <div
              style="
                width: 5px;
                height: 5px;
                background: #d8d8d8;
                margin: 6px 10px 5px 20px;
                border-radius: 50%;
              "
            />
            <span style="color: #4b6eef; font-size: 14px; margin-top: -2px"
              >运维主管张波</span
            >
          </div>
          <div class="time-box">
            <div>关闭</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import HkTable from "@/components/HKTable";

export default {
  components: { HkTable },
  data() {
    return {
      tableData: [
        {
          event_category: ["运维异常"],
          event_level: ["一般"],
          startTime: "2022-07-26 16:28:22",
          description:
            "发现运维人员工单处置不规范-运维人员在工作时同执行可能影响正常业务的运维操作，系统名称：泓科主机监控与南计系统，访问地址上：http://192.168.1.217/2",
        },
      ],
    };
  },
};
</script>

<style scoped lang="scss">
.back {
  margin-bottom: 20px;
}

// background-color: #ffffff;
//   height: 1000px;

.box-top {
  // height: 200px;
  background: #ffffff;
  border-radius: 4px;
  padding-left: 20px;
  padding-bottom: 30px;
  margin-bottom: 20px;

  .box-top-title {
    height: 62px;
    line-height: 62px;
    // text-align: center;
    font-size: 16px;
    font-weight: 600;
  }
  .box-img {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    justify-content: left; /* 水平居中对齐 */
    // margin-left:60px
    // flex-shrink: 0;
  }
  .box-top-content {
    margin-bottom: 20px;
  }
  .time-img {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 12px;
    // margin-left: -5px;
  }
  .time-box {
    display: flex;
    flex-direction: column;
    // align-items: center;
    justify-content: center;
    height: 78px;
    line-height: 25px;
    background-color: #f5f7fe;
    border-left: 3px #4b6eef solid;
    padding: 0 18px;
    margin-top: 10px;
    word-wrap: break-word;
    font-size: 14px;
    color: #333435;
    margin-left: 5px;
  }
}
</style>
